<!--
 * @description: 
 * @Date: 2022-10-20 19:41:22
 * @LastEditTime: 2022-11-23 21:09:57
-->
<template>
  <div class="addComponent space-y-2">
    <div v-for="i in List">
      <div class="labelItem flex">
        <div class="flex-shrink-0 bg-slate-100 rounded-lg iconcss">
          <component :is="i.components"></component>
        </div>
        <div class="flex flex-col ml-2 w-full">
          <div class="text-base w-full flex">
            <span>
              {{ i.name }}
            </span>
            <img
              style="width: 20px; height: 20px"
              class="ml-auto cursor-pointer"
              src="@/assets/svg/addIcon.svg"
              @click="add(i.data)"
            />
          </div>
          <span class="text-xs mt-2">{{ i.tips }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, markRaw, ref } from "vue";
import { useStore } from "vuex";
import appComponent from "../plugin";
const store = useStore();
const List = markRaw([
  {
    name: "热搜榜",
    tips: "百度实时热搜榜单",
    components: appComponent["hotSearch"],
    data: {
      id: 1,
      size: "2x4",
      component: "hotSearch",
      name: "热搜榜",
      type: "component",
      url: "hotSearch",
    },
  },
  {
    name: "天气",
    tips: "所在地实时天气",
    components: appComponent["weather"],
    data: {
      id: 2,
      size: "2x4",
      component: "weather",
      name: "天气",
      type: "component",
      url: "weather",
    },
  },
  {
    name: "备忘录",
    tips: "快捷记录您的时事",
    components: appComponent["note"],
    data: {
      id: 3,
      size: "2x4",
      component: "note",
      name: "备忘录",
      type: "component",
      url: "note",
    },
  },
]);
const add = (item) => {
  const data = store.getters.find(item.id);
  if (data) {
    return false;
  } else {
    store.state.link.push(item);
    store.commit("updateLink");
  }
};
</script>
<style lang="less">
.addComponent {
  .iconcss {
    width: 63px;
    height: 63px;
    border-radius: var(--iconRadius);
    overflow: hidden;
  }
}
</style>
